<template>
	<div v-loading="loading">
		<el-tree v-model="info" ref="tree" :data="deptList" :props="defaultProps" node-key="deptId" default-expand-all
			:show-checkbox="showCheck" @check-change="handleCheckChange" @node-click="setNodeClick" highlight-current>
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span>{{ node.label }}</span>
			    <!--      <el-button
			            type="text"
			            size="mini"
			            @click="() => append(data)">
			            Append
			          </el-button>
			          <el-button
			            type="text"
			            size="mini"
			            @click="() => remove(node, data)">
			            Delete
			          </el-button> -->
			        </span>
		</el-tree>
	</div>
</template>

<script>
	import {
		listDept,
		getDept,
		delDept,
		addDept,
		updateDept,
		listDeptExcludeChild
	} from "@/api/system/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";

	export default {
		name: "Dept",
		dicts: ['sys_normal_disable'],
		components: {
			Treeselect
		},
		data() {
			return {
				loading: false,
				defaultProps: {
					children: 'children',
					label: 'deptName',
					disabled: 'disabled'
				},
				// 表格树数据
				deptList: [],
				info: [],
				showCheck: true,
			};
		},
		created() {},
		methods: {
			/** 查询部门列表 */
			getList(e, dis) {
				this.loading = true;
				listDept(this.queryParams).then(response => {

					response.data = response.data.map(v => {
						let obj = {
							...v
						}
						obj.disabled = dis
						return obj
					})
					if (dis) {
						let arr = []
						console.log(e, response.data)
						response.data.forEach(v => {
							if (e.includes(v.deptId.toString())) {
								arr.push(v)
							}
						})
						response.data = arr
					}

					this.deptList = this.handleTree(response.data, "deptId");
					this.loading = false;
					
					
					if (e) {
						this.$nextTick(()=>{
							this.$refs.tree.setCheckedKeys(e)
							this.$emit('nodeClick',{deptId:e[0]})
							this.$refs.tree.setCurrentKey(e[0])
						})
					}
				});
			},
			/** 转换部门数据结构 */
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.deptId,
					label: node.deptName,
					children: node.children
				};
			},
			handleCheckChange(e) {
				console.log(this.$refs.tree.getCheckedKeys())
				let arr = this.$refs.tree.getCheckedKeys()
				this.$emit('setDept', arr)

			},
			showNode(e = [], dis = false) {
				this.showCheck = dis ? false : true;
				this.getList(e, dis);
			},
			setNodeClick(row){
				this.$emit('nodeClick',row)
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
		background-color: #1678ff;
		color: #fff;
	}
	::v-deep .el-tree-node__content{
		height: 36px;
	}
</style>